<template>
  <div class="userMapContainer">
      <!-- 顶部导航 -->
      <div class="top">
          <div class="left" @touchend="$router.back()">
             <yd-icon name="back" slot="icon" custom  size=".3rem" color="#FFffff"></yd-icon>
          </div>
          <div class="mid">
              {{udata.user.name}}
          </div>
          <div class="right"></div>
      </div>
      <!-- 地图 -->
    <baidu-map v-if="mapshow" @touchend="getpoint" class="map" :center="{lng: upoint.lng, lat: upoint.lat}" :zoom="15" :style="{height:mapheight}">
             <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
            <bm-marker :position="{lng: upoint.lng, lat: upoint.lat}"  animation="BMAP_ANIMATION_BOUNCE">
                <!-- <bm-label  content="" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
            </bm-marker>
            <bm-circle :editing="true" v-if="circleShow" :center="circlePath.center" :radius="circlePath.radius" stroke-color="blue" :stroke-opacity="0.5" :stroke-weight="2"  >
            </bm-circle>
    </baidu-map>
    <!-- 菜单 -->
      <div class="btm" :style="{height:menuheight}">
          <div class="item" v-for="(ite,num) in icoList" :key="num">
              <div class="ico">
                  <img :src="ite.img" alt="">
              </div>
              <div class="content">
                  <p>{{ite.name}}</p>
                  <p>{{ite.detail}}</p>
              </div>
          </div>
      </div>
      <div v-if="mapshow">
        <p class="btn" @touchend="menuClick()" v-if="btn">︽</p>
        <p class="btn" @touchend="menuClick()" v-if="!btn">︾</p>
        <button @touchend="setCircle">设置活动范围</button>          
      </div>
          <!-- 弹出输入框 -->
    <yl-pop-input :ylPop="inputItem" v-if="inputItem.show" @resVal="getMsg"></yl-pop-input>
  </div>
</template>
<script>
import ylPopInput from '@/components/popInput'
//  import  '@/common/js/base/pedometer.js'
export default {
     components:{ylPopInput},
  data(){
      return {
        pedometerNum:null,//运动步数
          mapheight:"40%",//地图高度
          menuheight:"50%",//菜单高度
          btn:true,//控制点击按钮
          circleShow:false,
          upoi:{},//用户坐标信息
          upoint:null,//坐标
          mapshow:false,//地图显示
          inputItem:{//弹出输入框
              cancel:this.cancel,
              show:false,
              title:"输入半径",
              holder:"请输入设置范围的半径(单位米)"
          },          
          icoList:[
              {img:require("../detail/img/position.png"),name:"位置",detail:"日常活动范围内"},
              {img:require("../detail/img/Cloud.png"),name:"环境",detail:''},
              {img:require("../detail/img/bike.png"),name:"运动",detail:"累计步数:"+this.$store.state.pedometer},
              {img:require("../detail/img/heart.png"),name:"体征",detail:"心率:78  呼吸:23"},
              {img:require("../detail/img/sleep.png"),name:"睡眠",detail:"时长:07.20  深度:01.17  浅睡:06.06"},
              ],
          showPoint:false,
          circlePath: {//圈圈
                center: {
                lng: null,
                lat: null
                },
                radius: null
            },
      }
  },
  computed:{
      udata(){//用户
          if(this.$route.query.data.geofence!=null){
              this.circlePath.center={
                  lng:this.$route.query.data.geofence.lng,
                  lat:this.$route.query.data.geofence.lat,
              }
              this.circlePath.radius=this.$route.query.data.geofence.radius*1000
              this.circleShow=true
          }
          return this.$route.query.data   
      },
  },
  watch:{
      upoi:{
          handler:function(newVal){//监听坐标信息是否获取到
            if(newVal!=null){
                this.upoint={
                    lng:newVal.lng,
                    lat:newVal.lat
                }
                this.mapshow=true;
            }
          },
          deep: true
      }
  },
  methods:{
      menuClick(){//展开隐藏菜单
          this.btn=!this.btn;
          if(!this.btn){
              this.mapheight="90%"
              this.menuheight="0"
          }else{
              this.mapheight="40%"
               this.menuheight="50%"
          }
      },
    getUpoint(){//查询用户坐标
      let poi={
          userId:this.udata.attentionUserID
      }
        this.ylAjax.showPoi(poi)
          .then(res=>{
            if(res.state==0){
              this.upoi=res.data
              console.log(this.upoi)
            }
          })        
      },
      updateCircle(){//获取最新数据
        let data={
            userId:localStorage.userid,
            attentionUserID:this.udata.attentionUserID
        }
        this.ylAjax.shwoSigfocus(data)
            .then(res=>{
                if(res.state==0){
                    console.log(res.data)
                    this.circlePath={
                center: {
                        lng: res.data.geofence.lng,
                        lat: res.data.geofence.lat
                        },
                        radius: res.data.geofence.radius*1000 
                    }
                }
            })                
      },
    // updateCirclePath (e){//圈子变动时中心与半径
    //   this.circlePath.center = e.target.getCenter()
    //   this.circlePath.radius = e.target.getRadius()
    // },
     getpoint(e){//获取坐标点
          if(this.showPoint){
            //   prompt("鼠标单击地方的经纬度为：",e.point.lng + "," + e.point.lat)
              this.circlePath.center.lng=e.point.lng
              this.circlePath.center.lat=e.point.lat
              this.showPoint=false
              this.circleShow=false;
              this.inputItem.show=true
          }
      },
      check(){//检查是否出圈子
        let data={
           myUserID:localStorage.userid,
           seterUserID:this.udata.attentionUserID
        }
        this.ylAjax.ifOut(data)
            .then(res=>{
                console.log(res)
            })
      },
     getMsg(data){//设置完半径向服务器发送请求
        this.inputItem.show=false
        let mydata={
            lat:this.circlePath.center.lat,
            lng:this.circlePath.center.lng,
            radius:data,
            attentionID:this.udata.id
        }
        this.ylAjax.setCircle(mydata)
            .then(res=>{//发送请求 设置成功
                this.circleShow=true;
                this.circlePath.radius=data
            })

      },      
      setCircle(){//设置电子栅栏
        this.$dialog.confirm({
                        title: '选取中心点',
                        mes: '请点击地图设置活动范围中心点',
                        opts: () => {
                            this.showPoint=true
                        }
                    });
      },
    cancel(){//取消按钮
        this.updateCircle()    
        this.circleShow=true
        this.inputItem.show=false
        },      
  },
  created(){
        this.getUpoint()
      window.uinterval=setInterval(()=>{
               this.getUpoint()
      },1000*60*3)
 
  },
  mounted(){
      console.log(this.udata)
           setTimeout(()=>{
         this.check()
     },2000)
  },
  destroyed(){
     clearInterval(window.uinterval)
  }
}
</script>
<style lang="less" scoped>
@import "~less/base";
    .userMapContainer{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
        .top{//顶部导航
            display: flex;
            height: 1rem;
            background-color: @background-a;
            text-align: center;
            line-height: 1rem;
            color: @color-t;
            .left{
                flex: 0 0 20%;
            }
            .mid{
                flex: 0 0 60%;
                font-size: 14px;
                letter-spacing: 2px;
            }
            .right{
                flex: 0 0 20%;
            }
        }
        .map{//地图
            transition: all .3s linear;
        }
        .btn{//按钮
            position: absolute;
            left: .2rem;
            top: 2.2rem;
            width: 1rem;
            height: 1rem;
            text-align: center;
            line-height: 1rem;
            background-color: @color-btn1;
            border-radius: 5px;
            font-size: 14px;
            color: @color-t;
            opacity: .8;
              }
        button{//设置
            position: absolute;
            top: 1.2rem;
            left: .2rem;
            width: 1rem;
            height: 1rem;
            border-radius: 5px;
            border: none;
            background-color: @color-btn1;
            color: @color-t;
            opacity: .8;
            font-size: 14px;
        }          
        .btm{//下方菜单
            width: 100%;
            overflow-y: scroll;
            margin-top: .1rem;
            border-top: 1px solid @color-border4;
            transition: all .3s linear;
            .item{//列表
              display: flex;
              height: 1.24rem;
              border-bottom: 1px solid @color-border4;
              .ico{
                  flex: 0 0 20%;
                  text-align: center;
                  img{
                      height: .5rem;
                      margin-top:.37rem;
                  }
              }
              .content{
                  flex: 0 0 80%;
                  >:nth-child(2){
                      color: @color-c2;
                      line-height: .8rem;
                  }
              }
            }
        }
    }
</style>
